<!doctype html>
<html lang="en">
<head>
	<title>PyTimer - Dashboard</title>
	<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="js/swfobject.js"></script>
	<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="js/jquery.menu.min.js"></script>
	<script type="text/javascript" src="js/ui/ui.core.js"></script>
	<script type="text/javascript" src="js/ui/ui.datepicker.js"></script>
	<script type="text/javascript" src="js/ui/ui.selectable.js"></script>
	<script type="text/javascript" src="js/ui/ui.sortable.js"></script>
	<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
	<link type="text/css" href="demos.css" rel="stylesheet" />
	<script type="text/javascript">

		var CategoryTimeSetting = "Pie";
		var ApplicationTimeSetting = "Bar";
		function reloadCategoryTime()
		{
			tmp = findSWF("Category Time Chart");
			x = tmp.reload("/"+CategoryTimeSetting+"(self.getData().categoryList).json()");
		}

		function reloadApplicationTime()
		{
			tmp = findSWF("Application Time Chart");
			x = tmp.reload("/"+ApplicationTimeSetting+"(self.getData().applicationList).json()");
		}

		function reload()
		{
			reloadCategoryTime();
			reloadApplicationTime();
		}

		function findSWF(movieName) {
		  if (navigator.appName.indexOf("Microsoft")!= -1) {
		    return window["ie_" + movieName];
		  } else {
		    return document[movieName];
		  }
		}

		var periodIndex = 0;
		function selectPeriod() {
			var d = $("#datepicker").datepicker( 'getDate' );
			var ds = d.getFullYear()+','+(d.getMonth()+1)+','+d.getDate();
			var path;
			switch(periodIndex){
				case 0:
					path = '/self.setDay('+ds+')';
				break;
				case 1:
					path = '/self.setWeek('+ds+')';
				break;
				case 2:
					path = '/self.setMonth('+ds+')';
				break;
				case 3:
					path = '/self.setYear('+ds+')';
				break;
			};
			$.get(path, function(data) {
				$("#commandResult").empty().append(data);
				});
			reload();
		}

		$(function() {
			$("#datepicker").datepicker({
				dateFormat: 'yy,mm,dd',
				onSelect: function(dateText, inst) {
						selectPeriod();
						}
				});

			$("#sortable").sortable();
			$('#sortable').children('li').each(function(){
					$(this).resizable();
					});
			$("#sortable").disableSelection();

			$("#periodSelector").selectable({
				stop: function(){
					$(".ui-selected", this).each(function(){
						periodIndex = $("#periodSelector li").index(this);
						selectPeriod();
					});
				}
			});

			$('#CategoryTimeSetting').menu({
				onClick: function(e, menuItem){
					CategoryTimeSetting = $(this).text();
					reloadCategoryTime();
				}}); 

			$('#ApplicationTimeSetting').menu({
				onClick: function(e, menuItem){
					ApplicationTimeSetting = $(this).text();
					reloadApplicationTime();
				}}); 
		});
	</script>

	<script type="text/javascript">
		swfobject.embedSWF(
  		"open-flash-chart.swf", "Category Time Chart", "100%", "100%",
  		"9.0.0", "expressInstall.swf",
  		{"data-file":"/"+CategoryTimeSetting+"(self.getData().categoryList).json()"}
  		);

		swfobject.embedSWF(
  		"open-flash-chart.swf", "Application Time Chart", "100%", "100%",
  		"9.0.0", "expressInstall.swf",
  		{"data-file":"/"+ApplicationTimeSetting+"(self.getData().applicationList).json()"}
  		);
	</script>

</head>
<body>

<div class="demo">

	<div class="ui-widget">
		<div class="ui-state-highlight ui-corner-all">
			<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
			<div id="commandResult">&nbsp</div></p>
			<p></p>
		</div>
	</div>

	<ul id="sortable">
		<li class="ui-state-default">
			<div class="ui-sortable-box">
				<div id="datepicker"/></div>
				<ul id="periodSelector">
					<li class="ui-widget-content">Day</li>
					<li class="ui-widget-content">Week</li>
					<li class="ui-widget-content">Month</li>
					<li class="ui-widget-content">Year</li>
				</ul>
			</div>
		</li>
		<li class="ui-state-default">
			<H2>&nbsp Category Time	</H2>
			<div class="ui-sortable-box">
				<div id ="Category Time Chart"></div>
			</div>
			<div id="CategoryTimeSetting">Setting
				<ul>
					<li>Pie</li>
					<li>Bar</li>
				</ul>
			</div>
		</li>
		<li class="ui-state-default">
			<H2>&nbsp Application Time</H2>
			<div class="ui-sortable-box">
				<div id ="Application Time Chart"></div>
			</div>
			<div id="ApplicationTimeSetting">Setting
				<ul>
					<li>Pie</li>
					<li>Bar</li>
				</ul>
			</div>
		</li>
	</ul>
</div>



</div><!-- End demo -->



</body>
</html>
